<!--  -->
<template>
  <Pad>
    <van-skeleton title :row="3" :loading="loading"/>
    <div class="no-data" v-if="!loading && list.length == 0">暂无接种人</div>
    <Inoculant :data="data" v-for="data in list" :key="data.inoculationPersonId" @remove="getList" v-lese/>
    <van-button type="primary" block color="#FF6600" @click="add">添加接种人</van-button>
    <van-dialog
      v-model="show"
      title="添加接种人"
      confirm-button-text="确定"
      :lazy-render="false"
      show-cancel-button
      :before-close="beforeClose"
      @open="open"
    >
      <van-form class="dialog-content" ref="form">
        <van-field
          v-model="form.name"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' } , { validator:nameValidator, message: '请填写正确的姓名' }]"
        />

        <!-- <Calendar v-model="form.birthday"/> -->
        <DatePicker v-model="form.birthday"/>
        <van-field
          v-model="form.phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写联系方式' },{ validator, message: '请填写正确的手机号' }]"
        />
      </van-form>
    </van-dialog>
  </Pad>
</template>

<script>
import Inoculant from "./inoculant";
import Pad from "@/components/pad";
import { getInoculationUsers } from "@/api/user";
import Calendar from "@/components/calendar";
import DatePicker from "@/components/datepicker";
import { follow, insertInoculationUser } from "@/api/user";
export default {
  components: { Pad, Inoculant, Calendar, DatePicker },
  data() {
    return {
      loading: true,
      list: [],
      show: false,
      form: {}
    };
  },
  //方法集合
  methods: {
    getList() {
      getInoculationUsers().then(res => {
        this.list = res.data;
        this.loading = false;
      });
    },
    beforeClose(action, done) {
      if (action == "confirm") {
        const { name, birthday, phone } = this.form;
        this.$refs.form
          .validate()
          .then(res => {
            insertInoculationUser({
              name,
              birthday,
              phone
            })
              .then(res => {
                console.log(res);
                this.$notify({ type: "success", message: "接种人添加成功！" });
                this.getList();
                done();
              })
              .catch(err => {
                this.$notify({ type: "danger", message: err.msg });
                done(false);
              });
          })
          .catch(err => {
            done(false);
          });
      } else {
        done();
      }
    },
    add() {
      this.show = true;
      // this.form = {};
    },
    open() {
      this.reset();
    },
    reset() {
      this.form = {};
      this.$refs.form.resetValidation();
    },
    nameValidator(val) {
      return /^[\u4E00-\u9FA5]{2,6}$/.test(val);
    },
    validator(val) {
      return /^1[3456789]\d{9}$/.test(val);
    }
  },
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss' scoped>
</style>